<template>
  <c-model v-model="show" width="590px" :title="title" :asyncClose="true" :maskClosable="false" @beforeClose="beforeClose">
    <span slot="footer"></span>
    <div class="qrcode-pay-model">
      <div class="tips">
        请打开 <span :class="['pay-label-'+ payType]">{{payType == 5? '微信' : '支付宝'}}</span>“扫一扫”去支付
      </div>
      <img :src="qrcode" alt="" class="wh-240"/>
      <div class="flex row-center col-center mb-26">
        <span class="bold fz-24 h-26">应付</span>
        <span> <span class="price">{{money}}</span></span>
      </div>
    </div>
  </c-model>
</template>
<script>

import {payStatus} from "@/api/goods";
import {rechargePayStatus} from "@/api/wallet";
import {leaseOrderStatus} from "@/api/deviceLease";
export default {
  name: "qrcodePay",
  props: {
    value: {type: Boolean, default: false},
    title: {type: String, default: '扫码支付'},
    orderNumber: {type: String, default: ''},
    orderType: {type: Number, default: 1}, // 订单类型 1-充值 2-商品 3-租赁
    payType: {type: String|Number, default: ''}, // 支付方式 5-微信 6-支付宝
    money: {type: Number, default: 0}, // 支付金额
    qrcode: {type: String, default: ''}
  },
  data() {
    return {
      imgUrl: '',
      count: 0,
      max: 1000 * 180,
      inner: null
    }
  },
  computed: {
    show: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit("input", val)
      }
    }
  },
  methods: {
    payStatus() {
      let params = {
        orderNumber: this.orderNumber
      }
      let api;
      if (this.orderType == 1) {
        api = rechargePayStatus(params)
      } else if (this.orderType == 2) {
        api = payStatus(params)
      } else if (this.orderType == 3) {
        api = leaseOrderStatus(params)
      }
      api.then(res => {
        if (res.code != 200) {
          this.$Message.error(res.msg);
          this.fail();
          return false;
        }
        if (res.data.status == 2) {
          this.success()
        } else {
          if (this.count >= this.max) {
            this.fail();
            this.$Message.error('支付超时');
            return false;
          }
          this.inner = setTimeout(() => {
            this.count += 1000;
            this.payStatus();
          }, 1000);
        }
      });
    },
    clearInter() {
      this.count = 0
      if (this.inner) {
        clearTimeout(this.inner);
      }
    },
    beforeClose() {
      this.$cMessageBox.confirm('正在支付中，确定取消支付吗？').then(() => {
        this.fail();
      })
    },
    onClose() {
      this.fail();
    },
    success() {
      this.show = false
      this.clearInter();
      this.$emit('success')
    },
    fail() {
      this.show = false;
      this.clearInter();
      this.$emit('fail')
    }
  },
  watch: {
    show() {
      if (this.show) {
        this.payStatus();
      } else {
        this.clearInter();
      }
    }
  },
  destroy() {
    this.clearInter();
  },
}
</script>

<style scoped lang="scss">
.qrcode-pay-model {
  text-align: center;
  .tips {
    font-weight: bold;
    margin-bottom: 36px;
    font-size: 24px;
    & .pay-label-5 {
      color: #00C901;
    }
    & .pay-label-6 {
      color: #06B4FD;
    }
  }
  img {
    border: 1px solid #f4f4f4;
  }
  .price {
    @include price($-color-brown, 36, 24);
    margin-top: 5px;
  }
}
</style>
